<template>
	<view>
		<!-- pages/user/assets/index.wxml -->
		<navbar></navbar>
		<view class="container">
			<view class="header">
				<view class="header-container">
					<!-- <view v-if="canIUseCompose" class="compose-assets dis-flex flex-x-between flex-y-center">
						<view class="dis-flex flex-y-center">
							<image class="img-compose" src="https://imgcdn.ecbao.cn/nft/compose.png" mode=""></image>
							<view class="m-left20">
								<view class="compose-title f-28">合	成{{ assetsName }}</view>
								<view class="m-top10 col-3 f-22">集齐{{ assetsName }}合成限定{{ assetsName }}</view>
							</view>
						</view>
						<button type="default" class="btn-normal btn-compose" @tap.stop.prevent="onCompose">去合成</button>
					</view> -->
					<view class="tab-list dis-flex">
						<view v-for="(item, index) in tab.list" :key="item.id"
							:class="'tab' + (tab.current == index ? ' active' : '')"
							@tap.stop.prevent="onToggleTab(index)">
							{{ item.title }}
						</view>
					</view>
				</view>
				<!-- <view class="header-placeholder" :class="{'header-placeholder--270h': canIUseCompose}"></view> -->
				<view class="header-placeholder" :class="{'header-placeholder--200h': canIUseCompose}"></view>
			</view>
			<view v-if="0 < list.length" class="assets-list">
				<view class="assets" v-for="item in list" :key="item.order_id" @tap.stop.prevent="onAssetsTaped(item)">
					<tag text="冻结" v-show="item.is_frozen"></tag>
					<view :class="['goods__img-wrapper', {'multi' : 1 < item.num}]">
						<easy-loadimage class="goods__img" mode="aspectFill" :scroll-top="scrollTop"
							:image-src="item.goods_image" borderRadius="16rpx"></easy-loadimage>
						<view v-if="1 < item.num" class="assets__num f-28">×{{ item.num }}</view>
					</view>
					<view class="assets-info">
						<view class="assets__name f-28 onelist-hidden--s">{{ item.goods_name }}</view>
					</view>
				</view>
				<bottom-safe-area></bottom-safe-area>
			</view>
			<view v-if="!loading && 0 == list.length" class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<view class="cont">您还没有{{ tab.list[tab.current].tips }}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		canIUseCompose
	} from "@/module.js";
	import navbar from "@/components/navbar/navbar";
	import tag from '@/components/tag/index'
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	import bottomSafeArea from '@/components/bottom-safe-area/index';
	// pages/user/assets/index.js
	const app = getApp();
	export default {
		components: {
			navbar,
			tag,
			easyLoadimage,
			bottomSafeArea,
		},
		data() {
			return {
				canIUseCompose: canIUseCompose,
				scrollTop: 0,
				list: [],
				loading: true,
				page: 1,
				hasMore: false,
				assetsName: '',
				tab: {
					list: [
						{
							title: '全部',
							id: 0,
							type: 'all',
							tips: ''
						},
						{
							title: '藏品',
							id: 1,
							type: 'collect',
							tips: ''
						},
						{
							title: '盲盒',
							id: 2,
							type: 'blind_box',
							tips: '盲盒'
						},
					],
					current: 0
				},
				easyLoadimage: {
					scrollTop: 50
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getAssetsName(() => {
				this.tab.list[0].tips = this.assetsName;
				this.tab.list[1].title = this.assetsName;
				this.tab.list[1].tips = this.assetsName;
				this.requestData();
			});

			app.loginSuccessCallback = () => {
				this.requestData();
			};
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// this.page = 1
			// this.list = []
			// this.requestData();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.setData({
				page: 1
			});
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.hasMore && !this.loading) {
				this.requestData();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			getAssetsName(callback) {
				this.assetsName = '藏品';
				callback && callback();
				// 2022.5.13，直接返回藏品，下面接口暂时保留
				// app._get('page/name', null, (res) => {
				// 	if (1 == res.code) {
				// 		this.assetsName = res.data;
				// 	}
				// }, null, () => {
				// 	callback && callback();
				// })
			},

			//////// networking ////////
			requestData: function(complete) {
				this.setData({
					loading: true
				});

				app._get(
					'user.order/collectGroupList', {
						page: this.page,
						dataType: this.tab.list[this.tab.current].type
					},
					(res) => {
						if (1 == res.code) {
							let {
								page,
								list,
								hasMore
							} = this;

							if (1 == page) {
								list.length = 0;
							}

							let {
								data,
								total
							} = res.data.list;
							list = [...list, ...data];
							hasMore = total > list.length;

							if (hasMore) {
								page++;
							}

							this.setData({
								page,
								list,
								hasMore
							});
						}
					},
					null,
					() => {
						this.setData({
							loading: false
						});

						if (complete) {
							complete();
						}
					}
				);
			},
			// 切换tab
			onToggleTab(index) {
				if (this.tab.current != index) {
					this.tab.current = index;
					this.page = 1;
					uni.showLoading();
					this.requestData(() => {
						uni.hideLoading();
					});
				}
			},
			// 去合成
			onCompose() {
				uni.navigateTo({
					url: `/pages/user/compose/index`
				});
			},
			onAssetsTaped: function(assets) {
    let url = '';
    if (1 < assets.num) {
     let dataType = (1 == assets.blind_box) ? 'blind_box' : 'all';
     url = `./list/list?goods_id=${assets.goods_id}&dataType=${dataType}`;
    } else {
     url = `./detail/detail?order_id=${assets.order_id}`;
    }
    if(this.tab.current == 2){
     let dataTypes = (1 == assets.blind_box) ? 'blind_box' : 'all';
     uni.navigateTo({
      url: `./luckilyBox/luckilyBox?goods_id=${assets.goods_id}&dataType=${dataTypes}`
     });
    }else{
     uni.navigateTo({
      url: url
     });
    }
    
   }
		}
	};
</script>
<style>
	page {
		background: #E5E5E5 !important;
	}
</style>
<style lang="scss" scoped>
	.assets-list {
		padding: 20rpx;
		overflow: hidden;
	}

	.assets {
		width: -webkit-calc((100% - 30rpx) * 0.5);
		width: calc((100% - 30rpx) * 0.5);
		border-radius: 10rpx;
		float: left;
		box-sizing: border-box;
		background: #fff;
		position: relative;
	}

	.assets:nth-child(even) {
		margin-left: 30rpx;
	}

	.assets:nth-child(n+3) {
		margin-top: 30rpx;
	}

	.assets .assets-info {
		// padding-top: 20rpx;
	}

	.assets .assets__name {
		text-align: center;
		padding: 10rpx;
	}

	.assets .goods__img-wrapper.multi:before,
	.assets .goods__img-wrapper.multi:after {
		content: "";
		border-radius: 16rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}

	.assets .goods__img-wrapper.multi:before {
		width: 96%;
		height: 8rpx;
		background: #E9E9E9;
		bottom: 8rpx;
		z-index: 2;
	}

	.assets .goods__img-wrapper.multi:after {
		width: 92%;
		height: 16rpx;
		background: #F1F1F1;
		bottom: 0;
		z-index: 1;
	}

	// 藏品图大小
	.assets .goods__img-wrapper {
		height: 395rpx;
		position: relative;
	}

	// 藏品图大小
	.assets .goods__img {
		width: 100%;
		height: 380rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.assets .assets__num {
		background: #FEE440;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		z-index: 4;
	}

	.header .header-container {
		width: 100%;
		//background: $uni-bg-color;
		background: #fff;
		padding: 20rpx;
		position: fixed;
		top: 0;
		z-index: 20;
		box-sizing: border-box;
	}

	.header .header-placeholder {
		/*20pd * 2 + 80h*/
		height: 120rpx;
	}

	.header .header-placeholder.header-placeholder--270h {
		/*20pd * 2 + 80h + 130h + 20mb*/
		height: 270rpx;
	}

	.header .compose-assets {
		height: 130rpx;
		-webkit-background: $uni-other-color-main-linear;
		background: $uni-other-color-main-linear;
		border-radius: 20rpx;
		padding: 0 30rpx 0 40rpx;
		margin-bottom: 20rpx;
	}

	.header .compose-assets .img-compose {
		width: 50rpx;
		height: 50rpx;
	}

	.header .compose-title {
		color: #1c1c1c;
		font-weight: bold;
	}

	.header .compose-assets .btn-compose {
		width: 146rpx;
		height: 54rpx;
		background: rgba(255, 255, 255, .9);
		border-radius: 27rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 26rpx;
		color: $uni-text-color-main;
	}

	.header .tab-list {
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
	}

	.header .tab {
		height: 100%;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #B5B5B5;
		position: relative;
		-webkit-transform: all 0.3s;
		transform: all 0.3s;
	}

	.header .tab:nth-child(n+2) {
		margin-left: 60rpx;
	}

	.header .tab.active {
		//color: $uni-text-color-inverse;
		color: #333;
	}

	.header .tab.active::after {
		content: "";
		width: 44rpx;
		height: 7rpx;
		background: #333;
		border-radius: 4rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.yoshop-notcont {
		padding-top: 200rpx;
		text-align: center;
	}

	.yoshop-notcont image {
		width: 210rpx;
		height: 145rpx;
	}

	.yoshop-notcont .cont {
		margin-top: 20rpx;
		color: #BCBCBC;
	}
</style>
